import React from 'react'
import { withRouter } from 'react-router-dom'

import './style.css'


let navList = [
    {
        icon: 'icon-home',
        text: '首页',
        val: '/',
    },
    {
        icon: 'icon-gouwuche-01',
        text: '购物袋',
        val: '/cart',
    },
    {
        icon: 'icon-user',
        text: '我',
        val: '/user',
    },
]

class Nav extends React.Component {

    click = (nav) => {
        this.setState({ nav })
        console.log(this.props)
        const { history } = this.props
        history.push(nav)
    }

    renderNav = () => {
        const { location } = this.props

        return navList.map(item => (
                <div 
                    className={`nav-item ${location.pathname === item.val && 'nav-item_active'} `}
                    key={item.icon}
                    onClick={() => this.click(item.val)}
                >
                    <i className={`iconfont ${item.icon}`}></i>
                    <span>{item.text}</span>
                </div>
            ))
    }

    render() {
        return (
            <div className='nav'>
                {this.renderNav()}
            </div>
        )
    }
}

export default withRouter(Nav)
